<!--
 * @Description: 我喜欢
 * @Author: liu (1427179517@qq.com)
 * @Date: 2023-05-05 13:56:00
 * @LastEditors: liu (1427179517@qq.com)
 * @LastEditTime: 2023-05-13 10:01:55
 * @FilePath: \jiekuan-app\src\subPages\other\myLove.vue
-->

<template>
  <div class="page">
    <div class="page-header">
      <u-navbar
        title=""
        :background="nav_background"
        title-color="#fff"
        back-icon-color="#fff"
        :height="60"
        :border-bottom="false"
      >
        <div class="u-flex all-center tab_box">
          <div
            v-for="(item, index) in tabs"
            :key="index"
            class="tabs_item"
            :class="{ tabs_item_active: current === item.type }"
            @click="handleClick({ type: 'tabs', item: item })"
          >
            {{ item.name }}
            <span class="tabs_border u-m-t-15" :class="{ tabs_border_active: current === item.type }"></span>
          </div>
        </div>
      </u-navbar>
    </div>
    <div class="page-content u-p-30">
      <template v-if="listData && listData.length">
        <div
          class="item u-flex u-m-t-30"
          v-for="(item, index) in listData"
          :key="index"
          @click.stop="handleClick({ type: 'details', item: item })"
        >
          <image src="" class="item_img flex-shrink u-m-r-10" alt="" />
          <div class="item_right u-p-l-16 flex-1 u-p-b-30">
            <div class="u-flex u-row-between">
              <div class="name u-m-t-14">{{ item.name }}</div>
              <div class="status">{{ item.status === 1 ? '在线' : '离线' }}</div>
            </div>
            <div class="u-flex u-m-t-18">
              <div class="tags u-flex u-col-center u-p-l-6" v-if="item.authentication">
                <image src="../../static/images/verify.png" class="icon" alt="" />
                <span class="u-m-l-6">真人认证</span>
              </div>
              <div class="tags u-flex u-col-center u-p-l-6 u-m-l-18" v-if="item.imgs && item.imgs.length">
                <image src="../../static/images/play.png" class="icon" alt="" />
                <span class="u-m-l-6">视频相册</span>
              </div>
            </div>
            <div class="flex u-m-t-15">
              <div class="msg_tags u-m-r-18" v-if="item.gender || item.age">
                {{ item.gender ? '女' : '男' }}·{{ item.age ? item.age + '岁' : '' }}
              </div>
              <div class="msg_tags u-m-r-18" v-if="item.height">{{ item.height }}cm</div>
              <div class="msg_tags u-m-r-18" v-if="item.weight">{{ item.weight }}kg</div>
              <div class="msg_tags u-m-r-18" v-if="item.career">{{ item.career }}</div>
              <div class="msg_tags" v-if="item.distance">{{ item.distance }}km</div>
            </div>
          </div>
        </div>
      </template>
      <template v-else>
        <u-empty mode="list" class="u-empty"></u-empty>
      </template>
    </div>
    <div class="page-footer"></div>
  </div>
</template>

<script>
export default {
  name: 'MyLove', // 页面名称
  components: {}, // 挂载组件
  props: {}, // 组件传值
  data() {
    return {
      nav_background: { background: 'transparent' },
      tabs: [
        { name: '我喜欢', type: 1 },
        { name: '喜欢我', type: 2 },
      ],
      current: 1,
      listData: [], // 数据列表=
      page: 1, // 当前页数
      per_page: 10, // 每页个数
      totalPages: 0, // 总页数（防止频繁上拉刷新）=
    }
  },
  computed: {}, // 计算机属性 类似与data概念
  watch: {}, // 监控data中数据变化
  created() {}, // 生命周期-创建完成(可以访问当前this实例)
  mounted() {}, // 生命周期-挂载完成(可以访问DOM元素)
  methods: {
    handleClick(options) {
      const { type, item } = options
      switch (type) {
        case 'tabs':
          this.current = item.type
          this.listData = []
          this.page = 1
          this.apiGetManageList()
          break
        default:
          break
      }
    },
    // 我的关注列表
    apiGetManageList(isRechBottom) {
      const params = {
        pageNum: this.page,
        pageSize: this.per_page,
      }
      this.$u.api[this.current === 1 ? 'GetManageList' : 'GetFollowerList'](params).then((res) => {
        const { list, totalPage } = res.data
        if (isRechBottom) {
          this.listData = this.listData.concat(list)
          return
        }
        this.listData = list
        this.totalPages = totalPage
        // this.totalPages = Math.ceil(total / this.per_page)
      })
    },
  }, // 挂载一些方法
  onLoad(options) {
    const { type } = this.$Route.query || options || {}
    if (type) {
      this.current = Number(type)
    }
    this.apiGetManageList()
    console.log('onLoad', options, Date.now())
  }, // 生命周期回调—监听页面加载
  onReachBottom() {
    if (this.page < this.totalPages) {
      this.page += 1
      this.apiGetManageList(true)
    }
  },
  onShow() {}, // 生命周期回调—监听页面显示
  onReady() {}, // 生命周期回调—监听页面初次渲染完成
  onHide() {}, // 生命周期回调—监听页面隐藏
  onUnload() {}, // 生命周期回调—监听页面卸载
}
</script>

<style lang="scss" scoped>
.page {
  background-image: url('http://minio.tianhong.mobi/mall/xiaoq/home_bg.png');
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
}
.tab_box {
  width: 86%;
}
.tabs_item {
  font-size: 31rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
}
.tabs_item:first-child {
  margin-right: 40rpx;
}
.tabs_item_active {
  font-size: 35rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #fcc307;
  line-height: 63rpx;
}
.tabs_border {
  width: 60rpx;
  height: 3rpx;
  display: block;
  margin-left: 20rpx;
}
.tabs_border_active {
  background: #fcc307;
}
.item {
  height: 304rpx;
  align-items: flex-start;
}
.item_img {
  width: 180rpx;
  height: 271rpx;
  background: #ffffff;
  opacity: 0.9;
  border-radius: 15rpx;
}
.item_right {
  height: 100%;
  border-bottom: 1rpx solid rgba($color: #fff, $alpha: 0.2);
  .name {
    font-size: 31rpx;
    font-family: Microsoft YaHei UI;
    font-weight: 400;
    color: #ffffff;
  }
  .status {
    width: 70rpx;
    height: 35rpx;
    background: #d7443e;
    border-radius: 18rpx;
    font-size: 21rpx;
    font-family: Microsoft YaHei UI;
    font-weight: 400;
    color: #ffffff;
    text-align: center;
    line-height: 35rpx;
  }
}
.tags {
  width: 140rpx;
  height: 35rpx;
  background: linear-gradient(0deg, #e2c43e, #fea700);
  border-radius: 3rpx;
  font-size: 21rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #4137ce;
}
.icon {
  width: 24rpx;
  height: 24rpx;
}
.msg_tags {
  padding: 7rpx 14rpx;
  box-sizing: border-box;
  height: 35rpx;
  background: rgba($color: #000000, $alpha: 0.3);
  border-radius: 3rpx;
  text-align: center;
  font-size: 21rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
  line-height: 21rpx;
  margin-bottom: 15rpx;
}
</style>
